<script>
import UserApi from "../../api/user";

export default {
    data() {
        return {
            userId: -1,
            oldPassword: "",
            newPassword: "",
            newPasswordAgain: "",
            msg: "",
            isDisabled: true,
            inputDisabled: true,
        }
    },
    methods: {
        async checkOldPassword() {
            try {
                let data = { password: this.oldPassword };
                const api = new UserApi();
                let res = await api.checkPassword(data);
                if (res.code === 200 && res.data.isEqual === true) {
                    this.inputDisabled = false;
                    // document.getElementById("new-password").focus();
                } else {
                    this.inputDisabled = true;
                }
                this.newPassword = "";
                this.newPasswordAgain = "";
                this.isDisabled = true;
                this.msg = res.msg;
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        checkNewPassword() {
            if (this.newPassword.length > 0) {
                if (this.newPassword === this.newPasswordAgain) {
                    this.isDisabled = false;
                } else {
                    this.isDisabled = true;
                }
            }
        },
        async changePassword() {
            try {
                let data = { password: this.newPassword };
                const api = new UserApi();
                let res = await api.changePassword(data);
                if (res.code === 200) {
                    this.$myMessageBox(res.msg);
                    this.$router.replace({ name: "user-profile" });
                }
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        }
    },
    mounted() {
        this.userId = this.$route.params.id;
    }
}
</script>

<template>
    <div class="user-password-edit">
        <div class="header">
            <h2>密码修改</h2>
            <p>
                <router-link class="button" :to="'/user/change-profile/' + userId">修改个人信息</router-link>
                <router-link class="button" :to="'/user/change-password/' + userId">修改密码</router-link>
                <a class="button" href="javascript:void(0);" @click="$goBack">返回</a>
            </p>
        </div>
        <div class="block">
            <p>
                <label for="old-password">原密码</label>
                <input type="password" id="old-password" v-model.trim="oldPassword" @blur="checkOldPassword"
                    @focus="msg = ''">
                <span>{{ msg }}</span>
            </p>
            <p>
                <label for="new-password">新密码</label>
                <input type="password" id="new-password" v-model.trim="newPassword" :disabled="inputDisabled">
            </p>
            <p>
                <label for="new-password-again">确认新密码</label>
                <input type="password" id="new-password-again" v-model.trim="newPasswordAgain" @blur="checkNewPassword"
                    :disabled="inputDisabled">
            </p>
            <p>
                <button :disabled="isDisabled" @click="changePassword">保存</button>
            </p>
        </div>
    </div>
</template>

<style scoped></style>